<template>
  <div id="comment-container" class="ui segment bottom attached">
    <el-divider>
      <div style="width: 150px;height: 50px;">
        <i class="el-icon-s-comment" style="font-size: 50px;"></i><span style="font-size: 25px;font-weight: 600;position: absolute;left: 40%;top: 28%;">{{blog.commentCount}}&nbsp;条评论</span>
      </div>
    </el-divider>
    <div class="ui segment">
      <div v-if="flag">
        <div class="ui threaded comments" style="font-size: 16px;max-width: none">
          <div class="comment" v-for="(comment, i) in page.list">
            <a class="avatar" style="position: relative">
              <img v-if="comment.email==='2390651924@qq.com'" class="blogger" src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/safety.png" alt="">
              <img :src="comment.avatar" style="width: 50px;height: 50px;border-radius: 50%;margin-left: -6px">
            </a>
            <div class="content">
              <a :href="comment.site" target="_blank" class="author">{{comment.nickname}}</a>
              <div class="metadata">
                <span class="date">{{comment.createTime}}</span>
              </div>
              <div class="text">{{comment.content}}</div>
              <div class="actions">
                <a class="reply" @click="openReply(i, comment)">回复</a>
              </div>
            </div>
            <div class="comments" v-if="comment.childCommentList!==null&&comment.childCommentList.length!==0">
              <div class="comment" v-for="(item) in comment.childCommentList">
                <a class="avatar" style="position: relative">
                  <img v-if="item.email==='2390651924@qq.com'" class="blogger" src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/safety.png" alt="">
                  <img :src="item.avatar" style="width: 50px;height: 50px;border-radius: 50%;margin-left: -6px">
                </a>
                <div class="content">
                  <a :href="item.site" target="_blank" class="author">{{item.nickname}}</a> 回复 <a class="author" target="_blank" :href="item.replyComment.site">{{item.replyComment.nickname}}</a>
                  <div class="metadata">
                    <span class="date">{{item.createTime}}</span>
                  </div>
                  <div class="text">{{item.content}}</div>
                  <div class="actions">
                    <a class="reply" @click="openReply(i, item)">回复</a>
                  </div>
                </div>
              </div>
            </div>
            <comment-post-form v-if="isReply&&replyId===i" :page-num="page.pageNum" :is-reply="isReply" :comment="replyComment" @cancelReply="cancelReply" @getList="getBlogCommentList"></comment-post-form>
          </div>
        </div>
        <div class="ui middle aligned two column grid">
          <div class="column">
            <a @click="previousPage" :class="previousPageClass + ' ui blue basic button'">上一页</a>
          </div>
          <div class="right aligned column">
            <a @click="nextPage" :class="nextPageClass + ' ui blue basic button'">下一页</a>
          </div>
        </div>
      </div>
      <div v-else>
        暂无评论
      </div>
      <comment-post-form class="postForm" v-if="!isReply" :page-num="page.pageNum" @getList="getBlogCommentList"></comment-post-form>
    </div>
  </div>
</template>

<script>
  import {getCommentListByBlogIdAndLimit} from "../api/blog";
  import CommentPostForm from "./CommentPostForm";

  export default {
    name: "CommentArea",
    components: {CommentPostForm},
    props: {
      blog: Object
    },
    data() {
      return {
        previousPageClass: "disabled",
        nextPageClass: "",
        page: {},
        // true：有评论 false：无评论
        flag: true,
        isReply: false,
        replyId: -1,
        replyComment: null
      }
    },
    activated() {
      this.getBlogCommentList(1)
    },
    methods: {
      getBlogCommentList(page) {
        let data = {
          page,
          size: 5,
          id: this.$route.params.blogId
        }
        if (this.$route.params.blogId !== undefined) {
          getCommentListByBlogIdAndLimit(data).then(res => {
          if (res.code === 200) {
            this.page = res.data
            this.page.list.forEach(value => {
              if (value.childCommentList !== null) {
                value.childCommentList.forEach(value1 => {
                  if (value1.parentCommentId === value.id) {
                    value1.replyComment = {
                      avatar: value.avatar,
                      blog: value.blog,
                      content: value.content,
                      createTime: value.createTime,
                      email: value.email,
                      id: value.id,
                      nickname: value.nickname,
                      parentCommentId: value.parentCommentId,
                      site: value.site
                    }
                  } else {
                    value.childCommentList.forEach(value2 => {
                      if (value1.parentCommentId === value2.id) {
                        value1.replyComment = value2
                      }
                  })
                  }
                })
              }
            })
            if (!this.page.list.length>0) {
              this.flag = false
            } else {
              this.flag = true
            }
            if (!this.page.hasPreviousPage) {
              this.previousPageClass = 'disabled'
            } else {
              this.previousPageClass = ''
            }
            if (!this.page.hasNextPage) {
              this.nextPageClass = 'disabled'
            } else {
              this.nextPageClass = ''
            }
          }
        })
        }
      },
      // 上一页
      previousPage() {
        if (this.page.pageNum > 1) {
          this.getBlogCommentList(this.page.pageNum - 1)
          this.$scrollTo('#comment-container')
        }
      },
      // 下一页
      nextPage() {
        if (this.page.pageNum < this.page.pages) {
          this.getBlogCommentList(this.page.pageNum + 1)
          this.$scrollTo('#comment-container')
        }
      },
      openReply(i, item) {
        this.isReply = true
        this.replyId = i
        this.replyComment = item
      },
      cancelReply() {
        this.isReply = false
      }
    }
  }
</script>

<style scoped>
  .blogger {
    width: 16px!important;
    height: 16px!important;
    position: absolute;
    top: 38px;
    left: 29px;
  }

  @media screen and (max-width: 768px) {
    .postForm {
      height: 520px!important;
    }
  }
</style>
